<html>
    <head>
        <title>Android平台阴影</title>
    </head>
    <body>
        <script>
            /*
                 十、Android 平台阴影

                          1、阴影 box-shadow

                                从HBuilderX3.4.3起，重新支持阴影样式(box-shadow)。修复老版本组件设置box-shadow后在不同系统版本出现的显示异常及闪烁问题! 

                                但需要注意设置阴影样式(box-shadow) 的组件需要让出阴影渲染位置，否则会出现阴影显示不全的问题。

                                eg:

                                    <template>
                                        <view class="wrapper">
                                            <view>
                                                <view class="box">
                                                    <text class="title" style="text-align: center">Hello World</text>
                                                </view>
                                            </view>
                                        </view>
                                    </template>
                                    <style>
                                        .box {
                                            width: 300px;
                                            height: 100px;
                                            background-color: #FFE4C4;
                                            border-radius: 10px;
                                            box-shadow: 3px 5px 2px rgb(255, 69, 0);
                                            margin: 10px;//让出阴影位置
                                        }
                                    </style>

                        2、阴影 elevation

                                目前Android平台对阴影样式(box-shadow)支持的还不太完善，有设置圆角边框时阴影样式显示不正常、占用组件视图渲染区域等问题。

                                为解决这些问题，从HBuilderX 2.4.7起，新增elevation属性（组件的属性，不是css样式）设置组件的层级，Number类型，
                                
                                层级值越大阴影越明显，阴影效果也与组件位置有关，越靠近页面底部阴影效果越明显

                                用法：

                                    <view elevation="5px"></view>


                              ★、注意

                                        ①、设置elevation 属性产生的阴影暂时无法修改颜色

                                        ②、设置 elevation 后当前组件的层级会高于其他未设置elevation组件的层级，都设置elevation值域越大则层级越高！

                                           组件覆盖的场景需要留意

                                        ②、为了避免 elevation 属性的阴影效果与阴影样式(box-shadow)冲突，设置elevation 属性后 box-shadow样式失效。

                                        ④、使用 elevation 需要阴影元素的父元素大于阴影范围，否则会对阴影进行裁剪

                                        ⑤、ios不支持elevation属性，请使用 box-shadow 设置阴影

                                        ⑥、设置 box-shadow 需要当前组件让出阴影位置。否则无法正常看到阴影。
            */

        </script>
    </body>
</html>